<template>
  <div class="main">
    <p class="main_text">结算单管理</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="searchFromData" label-width="6.25rem" class="df">
        <el-form-item label="号牌号码：" style="width: 20%">
          <el-input v-model="searchFromData.carNo" placeholder="号牌号码" class="mr20" />
        </el-form-item>
        <el-form-item label="结算单编号：" style="width: 20%">
          <el-input v-model="searchFromData.orderSn" placeholder="结算单编号" class="mr20" />
        </el-form-item>
        <el-form-item label="结算状态：" style="width: 20%">
          <el-select v-model="searchFromData.billStatus" placeholder="结算状态" class="mr20">
            <el-option label="结算中" value="2" />
            <el-option label="已结算" value="1" />
            <el-option label="未结算" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="20">
          <el-button type="primary" @click="searchBtn">查询</el-button>
          <el-button type="primary" plain @click="resc">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-button type="primary" plain @click="exportExcelFitting" v-if="roleList.write" style="width: fit-content">导出数据</el-button>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- ********** 全部 ********** -->
        <el-tab-pane v-for="item in tabsList" :key="item.id" :name="item.id">
          <template #label>
            <span>{{ item.name }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-table  :data="tableData"
        :header-cell-style="{ background: '#f0f6fe' }" :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column label="结算单号" prop="formId" width="80" :show-overflow-tooltip="true" />
        <el-table-column label="订单号" prop="orderSn" :show-overflow-tooltip="true" />
        <el-table-column label="车牌号码" prop="号牌号码" :show-overflow-tooltip="true">
          <template #default="props">
            <el-text tag="span" style="cursor: pointer" @click="checkDataList(props.row)">{{
              props.row.号牌号码
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="称重人" prop="称重人" :show-overflow-tooltip="true" />
        <el-table-column label="溢价金额" prop="premium" :show-overflow-tooltip="true" />
        <el-table-column label="缺件扣款" prop="missingPartsDeducted" :show-overflow-tooltip="true" />
        <el-table-column label="单价" prop="unitPrice" :show-overflow-tooltip="true" />
        <el-table-column label="价款合计" prop="price" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" prop="createdAt" :show-overflow-tooltip="true" />
        <el-table-column label="审核状态">
          <template #default="props">
            <el-text type="primary" v-if="props.row.auditStatus == 0">审核中</el-text>
            <el-text type="danger" v-else-if="props.row.auditStatus == 1">未通过</el-text>
            <el-text type="success" v-else>已通过</el-text>
          </template>
        </el-table-column>
        <el-table-column label="结算状态">
          <template #default="props">
            <el-text type="warning" v-if="props.row.billStatus == 0">未结算</el-text>
            <el-text type="success" v-else-if="props.row.billStatus == 1">已结算</el-text>
            <el-text type="primary" v-else-if="props.row.billStatus == 2">结算中</el-text>
          </template>
        </el-table-column>
        <el-table-column label="制单人" prop="formMakerName" :show-overflow-tooltip="true" />
        <el-table-column label="收款人" prop="收款人" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="付款人" prop="结算人" :show-overflow-tooltip="true" /> -->
        <el-table-column label="备注" prop="remarks" :show-overflow-tooltip="true" />
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="props">
            <el-button size="small" link type="primary" @click="checkDataList(props.row)"
              v-if="roleList.read">查看</el-button>
            <el-popconfirm title="你确定要结算吗？" @confirm="SettleSaveBtn">
              <template #reference>
                <el-button v-if="props.row.auditStatus == 2 && props.row.billStatus == 0 && roleList.write" size="small"
                  link type="primary" @click="SettleBtn(props.row)">结算</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 提交审核 ****************************** -->
    <el-dialog class="dialog" v-model="checkcenterDialogVisible" title="提交审核" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">提交审核</p>
        </div>
      </template>
      <el-form :model="auditTableData" label-width="120" label-position="left" class="df fww aic jcc">
        <el-form-item label="创建时间：" style="width: 60%">
          <el-input v-model="auditTableData.createdAt" placeholder="创建时间：" disabled />
        </el-form-item>
        <el-form-item label="缺件扣款：" style="width: 60%">
          <el-input v-model="auditTableData.missingPartsDeducted" placeholder="缺件扣款：" disabled />
        </el-form-item>
        <el-form-item label="价款合计：" style="width: 60%">
          <el-input v-model="auditTableData.price" placeholder="价款合计：" disabled />
        </el-form-item>
        <el-form-item label="制单人：" style="width: 60%">
          <el-input v-model="auditTableData.formmakerId" placeholder="制单人：" disabled />
        </el-form-item>
        <el-form-item label="审核状态：" style="width: 60%">
          <el-select v-model="auditTableData.auditStatus" placeholder="审核状态：" style="width: 100%">
            <el-option label="未通过" value="1" />
            <el-option label="已通过" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核描述：" style="width: 60%">
          <el-input v-model="auditTableData.auditDescription" type="textarea" placeholder="审核描述：" />
        </el-form-item>
        <el-form-item label="拒绝原因：" v-if="auditTableData.auditStatus == 1" style="width: 60%">
          <el-input v-model="auditTableData.rejectReason" type="textarea" placeholder="拒绝原因：" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" plain @click="checkcenterDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">&nbsp;提交&nbsp;</el-button>
      </template>
    </el-dialog>
    <!-- ****************************** 查看结算单 ****************************** -->
    <el-dialog class="dialog" v-model="centerDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">查看结算单</p>
        </div>
      </template>
      <el-form :model="recordsFormData" label-width="80" label-position="left" class="df fww jcsb">
        <el-form-item label="结算单号:" style="width: 50%">
          <span>{{ recordsFormData.formId }}</span>
        </el-form-item>
        <el-form-item label="创建时间:" style="width: 50%">
          <span>{{ recordsFormData.createdAt }}</span>
        </el-form-item>
        <el-form-item label="订单号:" style="width: 50%">
          <span>{{ recordsFormData.orderSn }}</span>
        </el-form-item>
        <el-form-item label="发起人:" style="width: 50%">
          <span>{{ recordsFormData.发起人 }}</span>
        </el-form-item>
        <!-- <el-form-item label="备注:" style="width: 50%;">
                    <span>{{ recordsFormData.remarks }}</span>
                </el-form-item> -->
      </el-form>
      <el-table max-height="300" :data="recordstableData" style="width: 100%" border
        :header-cell-style="{ background: '#f0f6fe' }">
        <el-table-column label="订单号" prop="orderSn" width="110" />
        <el-table-column label="车牌号" prop="号牌号码" width="100" />
        <el-table-column label="车辆净重(kg)" prop="车辆净重" width="120" />
        <el-table-column label="单价(元)" prop="unitPrice" width="110" v-if="misspartsDeductionFlag" />
        <el-table-column label="缺件扣款(元)" prop="缺件扣款" width="110" v-if="misspartsDeductionFlag" />
        <!-- <el-table-column label="单价(元/吨)" prop="" /> -->
        <!-- <el-table-column label="残值款(元)" prop="price" width="110" /> -->
        <el-table-column label="价款合计(元)" v-if="misspartsDeductionFlag" prop="price" fixed="right" />
        <el-table-column label="一口价(元)" v-if="!misspartsDeductionFlag" prop="price" fixed="right" />
        <el-table-column label="收款人" prop="收款人" fixed="right" />
      </el-table>

      <template #footer>
        <el-button type="primary" plain @click="centerDialogVisible = false">取消</el-button>
        <!-- <el-button type="primary" @click="submitAudit">&nbsp;提交审核&nbsp;</el-button> -->
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { Wallet, Edit } from '@element-plus/icons-vue';
import { exportFile } from '@/utils/exportFile.js';
import { formatTime, formatTimeHan } from '@/filters/index';
import {
  RequestSettleGetlistlimit,
  RequestSettleauditSettle,
  RequestSettleId,
  RequestSettleOutputExcel,
  RequestSettleBillSettleWithoutWeb,
} from '@/api/path/index.js';
import { ref } from 'vue';
import useAuthorize from '@/hooks/authorize';
import { id } from 'element-plus/es/locale';
let roleList = useAuthorize();
const activeName = ref('-1');
const searchFromData = ref<any>({
  billStatus: null,
  orderSn: null,
  carNo: null,
});
const tabsList = ref<any>([
  {
    name: '全部',
    id: '-1',
  }, {
    name: '审核中',
    id: '0',
  }, {
    name: '未通过',
    id: '1',
  }, {
    name: '已通过',
    id: '2',
  },
])
const searchBtn = () => {
  getData(status.value);
};
const resc = () => {
  currentPage.value = 1;
  status.value = '';
  activeName.value = '-1';
  searchFromData.value.billStatus = null;
  searchFromData.value.orderSn = null;
  searchFromData.value.carNo = null;
  getData(status.value);
};

const tableData = ref<any>([]);
const checkFormData = ref<any>({});
const centerDialogVisible = ref<any>(false);
const checkcenterDialogVisible = ref<any>(false); //详情
/* ************************ 分页获取数据 ************************ */
const total = ref<any>(0);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = (status: any) => {
  RequestSettleGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    auditStatus: status,
    billStatus: searchFromData.value.billStatus,
    orderSn: searchFromData.value.orderSn,
    carNo: searchFromData.value.carNo,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
const status = ref<any>('');
const handleClick = (tab: any, event: any) => {
  currentPage.value = 1;
  if (tab.props.name == '-1') {
    status.value = '';
    getData(status.value);
  } else {
    status.value = tab.props.name;
    getData(status.value);
  }
};
getData(status.value);
const handleCurrentChange = (val: number) => {
  getData(status.value);
};
/* ************************ 查看结算单 ************************ */
const recordsFormData = ref<any>({});
const recordstableData = ref<any>([]);
const misspartsDeductionFlag = ref<any>(false);
const checkDataList = (row: any) => {
  recordsFormData.value = row;
  centerDialogVisible.value = true;

  RequestSettleId(row.formId).then((res: any) => {
    res.resultObj.createdAt = formatTime(res.resultObj.createdAt);
    recordsFormData.value = res.resultObj;
    if (res.resultObj.缺件扣款 == res.resultObj.missingPartsDeducted) {
      misspartsDeductionFlag.value = true;
    } else {
      misspartsDeductionFlag.value = false;
    }
    recordstableData.value = [res.resultObj];
    console.log(res.resultObj);
  });
};
/* ************************ 审核 ************************ */
const auditTableData = ref<any>();
const auditData = (row: any) => {
  console.log(row);
  row.auditStatus = String(row.auditStatus);
  auditTableData.value = row;
  checkcenterDialogVisible.value = true;
};
/* ************************ 提交审核 ************************ */
const submitAudit = () => {
  auditTableData.value.employee = JSON.parse(localStorage.getItem('roleInfo')!);
  delete auditTableData.value.createdAt;
  RequestSettleauditSettle(auditTableData.value).then((res: any) => {
    console.log(res.success);
    if (res.success == true) {
      ElMessage.success(res.msg);
      checkcenterDialogVisible.value = false;
      getData('');
    } else {
      ElMessage.error(res.msg);
      checkcenterDialogVisible.value = false;
      getData('');
    }
  });
};
/* ************************ 结算 ************************ */
const SettleDetail = ref<any>({});
const SettleBtn = (row: any) => {
  console.log('SettleBtn', row);
  SettleDetail.value = row;
};
const SettleSaveBtn = () => {
  console.log(SettleDetail.value.formId);
  RequestSettleBillSettleWithoutWeb(SettleDetail.value.formId).then((res: any) => {
    if (res.success == true) {
      ElMessage.success('结算成功');
      getData('');
    } else {
      ElMessage.error(res.msg);
    }
  });
};
/* ************************ 删除 ************************ */
// const delData = (row: any) => {
//     const formimgs = new FormData()
//     formimgs.append('ids', row.inboundId)
//     RequestinboundDeleteList(formimgs).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }
const exportExcelFitting = () => {
  let nowDate = formatTimeHan(new Date());
  RequestSettleOutputExcel({
    page: 1,
    rows: 100000,
  }).then((res: any) => {
    if (res.type == 'application/json') {
      ElMessage.error('暂无数据导出');
    } else {
      exportFile(res, `${nowDate}所有业务员数据报表(收款人即业务员)`);
    }
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: 0.375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: 0.0625rem dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: 0.0625rem dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}

::v-deep .el-upload {
  opacity: 0;
}
</style>
